import '@wangeditor/editor/dist/css/style.css' // 引入 css

import React, { useState, useEffect } from 'react'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { IDomEditor, IEditorConfig, IToolbarConfig,DomEditor } from '@wangeditor/editor'
import Cloud from 'leancloud-storage'

function getBase64(img, callback) { //将本地资源对象，转换为base64编码
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
function IntroEditor(props) {
    // editor 实例
    const [editor, setEditor] = useState<IDomEditor | null>(null)

    // 编辑器内容
    const [brieft, setBrief] = useState('')

    // 工具栏配置
    const toolbarConfig: Partial<IToolbarConfig> = { 
        toolbarKeys: [
            'headerSelect',
            'bold',
            'color',
            'bgColor',
            'fontSize',
            'fontFamily',
            'lineHeight',
            {
                key: "group-image",
                title: '图片',
                iconSvg: `<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>`,
                menuKeys: ["insertImage", "uploadImage"],
            }
        ]
    }  

    // 编辑器配置
    const editorConfig: Partial<IEditorConfig> = {   
        MENU_CONF: {}
    }
    // 上传图片的配置
    editorConfig.MENU_CONF = editorConfig.MENU_CONF || {};
    editorConfig.MENU_CONF['uploadImage'] = {
        // 自定义上传
        customUpload(file: File, insertImgFn: (url: string) => void) {
            getBase64(file, (base64) => {
                const fileObj = new Cloud.File('cakeimg.png', { base64: base64 });
                fileObj.save().then((res) => {
                    const url = res?.get('url');
                    if (url) {
                        insertImgFn(url);
                    } else {
                        console.log('上传失败');
                    }
                }).catch((err) => {
                    console.log('上传失败', err);
                });
            });
        },
    };

    // 及时销毁 editor ，重要！
    useEffect(() => {
        console.log('查看默认配置',DomEditor.getToolbar(editor as IDomEditor)?.getConfig().toolbarKeys)
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])

    return (
        <>
            <div style={{ border: '1px solid #ccc', zIndex: 100}}>
                <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{ borderBottom: '1px solid #ccc' }}
                />
                <Editor
                    defaultConfig={editorConfig}
                    value={brieft}
                    onCreated={setEditor}
                    onChange={editor => {
                        props.onChange(editor.getHtml())
                        setBrief(editor.getHtml())
                    }}
                    mode="default"
                    style={{ height: '500px', overflowY: 'hidden' }}
                />
            </div>
            {/* <div style={{ marginTop: '15px' }}>
                {brieft}
            </div> */}
        </>
    )
}

export default IntroEditor